import React, { useEffect, useState } from "react";
import { NavLink } from "react-router-dom";
/*底部导航组件*/
import "./footernav.css";
import tabblue1 from "../../../accets/images/tabblue1.jpg";
import tabyellow1 from "../../../accets/images/tabyellow1.jpg";
import tabblue2 from "../../../accets/images/tabblue2.jpg";
import tabyellow2 from "../../../accets/images/tabyellow2.jpg";
import tabblue3 from "../../../accets/images/tabblue3.jpg";
import tabyellow3 from "../../../accets/images/tabyellow3.jpg";
import tabblue4 from "../../../accets/images/tabblue4.jpg";
import tabyellow4 from "../../../accets/images/tabyellow4.jpg";

function Footernav() {
  let [arr, Setarr] = useState([
    {
      id: 1,
      blue: tabblue1,
      yellow: tabyellow1,
      text: "何昱炎猪",
      url: "/home",
      flag: false,
    },
    {
      id: 2,
      blue: tabblue2,
      yellow: tabyellow2,
      text: "何芋圆啊",
      url: "/Config",
      flag: false,
    },
    {
      id: 3,
      blue: tabblue3,
      yellow: tabyellow3,
      text: "监控系统",
      url: "/Jianguan",
      flag: false,
    },
    {
      id: 4,
      blue: tabblue4,
      yellow: tabyellow4,
      text: "态势管理",
      url: "/Taishi",
      flag: false,
    },
  ]);
  useEffect(() => {
    let path=window.location.pathname;
    let data=arr.find(item=>item.url===path);
    data.flag=true;
    Setarr([...arr]);
  },[]);
  return (
    <div className="boo">
      <div className="footer">
        {arr.map((item) => {
          return (
            <NavLink key={item.id} className="ggg" to={item.url}>
              <img
                src={item.flag == false ? item.blue : item.yellow}
                alt=""
              ></img>
              <span>{item.text}</span>
            </NavLink>
          );
        })}
      </div>
    </div>
  );
}

export default Footernav;
